<template>
  <view class="mask" :class= "mask == 'true' || mask == true ? 'mask-show' : ''" @click="Mclose" v-if="show" @touchmove.stop.prevent="preventTouchMove">
		<!-- 加载动画开始 -->    <!-- loading1~loading30挑选任意一个替换下方html 且替换对应css -->
   <view class="spinner-box">
     <view class="pulse-container">  
       <view class="pulse-bubble pulse-bubble-1"></view>
       <view class="pulse-bubble pulse-bubble-2"></view>
       <view class="pulse-bubble pulse-bubble-3"></view>
     </view>
   </view>
		<!-- 加载动画结束 -->
		<!-- <view class="title">{{text}}</view> -->
		
		<!-- 用法 -->
		<!-- <w-loading text="加载中.." mask="true" click="true" ref="loading"></w-loading> -->
			<!-- mask:  	true 无遮罩层              		|     false 有遮罩层 						 -->
			<!-- click:  	true 点击空白无法关闭加载状态   |     false 点击空白可关闭加载状态 -->
			<!-- //初次进入页面触发加载，请将打开加载动画钩子，放入页面
			onReady中，放入onLoad中会报错
			原因为this.$refs.loading需要找到dom节点，在onLoad时
			dom不能保证渲染完毕，在onReady中可在dom渲染完毕才会触发
			
			//打开加载动画
			this.$refs.loading.open()
			
			//关闭加载动画
			this.$refs.loading.close() -->
  </view>
  <!-- 遮罩层-->
</template>

<script scoped="true">
export default {
  name: "w-loading",
	props:{
		text: String,
		mask: Boolean | String,
		click: Boolean | String,
	},
  data() {
    return {
			show: false
		};
  },
	methods:{
		preventTouchMove(){
			console.log('stop user scroll it!');
			return;
		},
		Mclose(){
			if(this.click == 'false' || this.click == false){
				this.show = false
			}
		},
		open(){
			this.show = true
    },
    close(){
      this.show = false
    }
	}
};
</script>

<style>

.mask {
  /* pointer-events: none; */
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
	flex-direction:column;
  justify-content: center;
  align-items: center;
	flex-wrap: wrap;
}
.mask.mask-show{
	/* background: rgba(7, 17, 27, .3); */
}
.title{
	color: #fff;
	font-size: 28upx;
}


@keyframes pulse {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: .25;
    transform: scale(.75);
  }
}

.spinner-box {
  width: 300upx;
  height: 300upx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}

/* PULSE BUBBLES */

.pulse-container {
  width: 120upx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pulse-bubble {
  width: 20upx;
  height: 20upx;
  border-radius: 50%;
  background-color: #6563d0;
}

.pulse-bubble-1 {
    animation: pulse .4s ease 0s infinite alternate;
}
.pulse-bubble-2 {
    animation: pulse .4s ease .2s infinite alternate;
}
.pulse-bubble-3 {
    animation: pulse .4s ease .4s infinite alternate;
}


</style>
